<template>
  <div class="box">
    <div class="box-item" @click="goDetails([item.userName,item.userId,item.picId,item.detailId,item.have3d])" 
    v-for="item in state.data" :key="item.id">
      <img
        :src="item.userProfilePhoto"
        alt="">
      <div class="content"><b>{{ item.userSignature }}</b></div>
      <div class="foot">
        <div class="left">
          <div class="left-1"><img :src="item.head" alt=""></div>
          <div class="left-2">{{ item.userName }}</div>

        </div>
        <div class="right"><van-icon name="like-o" size="18px" />{{item.userloves}}</div>
      </div>
    </div> 

  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import axios from '@/api'
import { onMounted, reactive } from 'vue';
const router = useRouter()



const state = reactive({
  sort:"1",
  data:[]
})
onMounted(async () => {
  try {
    const { data } = await axios.get('users/recommend',{
      params:{
        sort: state.sort
      }
    })
    console.log(data);
    state.data = data
    
  } catch (error) {
    
    console.log(error)
  }
})


const goDetails = (item)  => {
  router.push({path:'/picture',query:{ item: JSON.stringify(item)}})
}
</script>

<style lang="less" scoped>
.box {

  margin-top: 5px !important;
  margin-bottom: 50px !important;
  padding: 5px 5px !important;
  // display: grid;
  // grid-template-columns: repeat(2, 1fr);
  // gap: 5px;
  column-count: 2;
  column-gap: 5px;
  background: lightblue !important;


  .box-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 5px;
    background: #fff;
    img {
      width: 100%;
    }

    .content {
      font-size: 15px;
      margin-top: 5px;
      padding: 0 5px ;
      word-wrap: break-word;
    }

    .foot {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      padding: 5px 5px;


      .left {
        //   span {
        //     overflow: hidden;
        //     img {
        //     width: 30px;
        //     height: 30px;
        //     border-radius: 50%;
        //     margin-right: 10px;
        //   }

        // }
        display: flex;
        justify-content: center;
        align-items: center;

        .left-1 {
          width: 30px;
          height: 30px;
          
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }

        .left-2 {
          margin-left: 15px;
          
        }

      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }
  }
}</style>
<style></style>